<template>
    <div>
        <a-table :data-source="image_list" :row-key="(record: any) => record.menu_id">
            <a-table-column key="user_id" title="名称" data-index="user_id">
                <template #default="{ record }">
                    <div>{{ record.user_id }}</div>
                </template>
            </a-table-column>
            <a-table-column key="img_url" title="图片" data-index="img_url">
                <template #default="{ record }">
                    <div>
                        <a-image :width="200" :src="record.img_url" :preview="{ src: record.img_url, }" />
                    </div>
                </template>
            </a-table-column>

            <a-table-column key="img_id" title="评论" data-index="img_id">
                <template #default="{ record }">
                    <div>
                        <a-button type="primary" @click="view_comments(record)"> 查看评论</a-button>
                    </div>
                </template>
            </a-table-column>
        </a-table>



        <!-- 评论列表 -->
        <a-modal ref="modalRef" v-model:visible="commentsVisible" width="60%" centered :wrap-style="{ overflow: 'hidden' }">
            <template #title>
                <div ref="modalTitleRef" style="width: 100%; cursor: move">编辑评论</div>
            </template>
            <div>
                <a-button type="primary" @click="add_comments" size="small"> 添加评论</a-button>
            </div>
            <a-table :data-source="comments_lists">
                <a-table-column key="user" title="名称" data-index="user">
                    <template #default="{ record }">
                        {{ record.user.nickname }} 1111
                    </template>
                </a-table-column>

                <a-table-column key="content" title="内容" data-index="content">
                    <template #default="{ record }">
                        {{ record.content }}
                    </template>
                </a-table-column>

                <a-table-column key="caozuo" title="操作" data-index="caozuo">
                    <template #default="{ record }">
                        <a-button type="link" > 编辑</a-button>
                        <a-button type="link"  danger> 删除</a-button>
                    </template>
                </a-table-column>
            </a-table>
        </a-modal>
        <!-- 添加评论 -->
        <a-modal ref="modalRef" v-model:visible="addCommentsVisible" centered width="30%"
            :wrap-style="{ overflow: 'hidden' }">
            1111111111111111

        </a-modal>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { corsApi } from "../../request/http";


onMounted(() => {
    get_list()
})
const columns = ref([{

}])

// 当前的图片的id
const image_id = ref<string | number>('')
// 评论列表 
const comments_lists = ref<string[] | null[]>([])
const commentsVisible = ref<boolean>(false)
const addCommentsVisible = ref<boolean>(false) //添加评论弹框
// 获取图片列表
const image_list = ref<string[]>([])
const get_list = async () => {
    const res = await corsApi('images_lists', 'get', {})
    console.log(res);
    if (res.data.status === 1) {
        image_list.value = res.data.result.list
    }

}

// 查看评论
const view_comments = async (row: any) => {
    console.log(row);
    image_id.value = row.img_id
    const res = await corsApi('comments_lists', 'get', { img_id: row.img_id })
    console.log(res);

    if (res.data.status === 1) {
        comments_lists.value = res.data.result.list
        commentsVisible.value = true
    }
}

// 添加评论
const add_comments = () => {
    console.log(image_id.value);
    addCommentsVisible.value = true
}
</script>

<style scoped lang="scss">
.ant-btn {
    margin: 0 5px;
}
</style>